<!DOCTYPE html>
<html lang="en">

<head>
	<!-- Global site tag (gtag.js) - Google Analytics -->
	<script async src="https://www.googletagmanager.com/gtag/js?id=UA-129399191-2"></script>
	<script>
		window.dataLayer = window.dataLayer || [];
		function gtag() {
			dataLayer.push(arguments);
		}
		gtag("js", new Date());

		gtag("config", "UA-129399191-2");
	</script>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>autoComplete.js - Vanilla Javascript library</title>
	<meta name=”description" content=”Simple autocomplete pure vanilla Javascript library that's designed for speed,
		high versatility and seamless integration with wide range of projects and systems.”>
	<meta name="keywords"
		content="autocomplete.js,autocomplete,simple autocomplete,pure vanilla javascript,vanilla js,javascript,js,library,speed,lightning fast,blazing fast,fast,search,suggestions,select,versatile,customizable,hackable,developer friendly,zero dependencies,lightweight,high integration,scalable,scalability,open source,github,javascript autocomplete,autocomplete javascript,autocompletejs,vanilla javascript library,easy to use autocomplete javascript library,fastest autocomplete javascript library,best autocomplete javascript library">
	<meta name="subject" content="autoComplete Javascript Library">
	<meta name="author" content="Tarek Raafat">
	<meta name="copyright" content="Tarek Raafat">
	<meta name="owner" content="Tarek Raafat">
	<meta name="google-site-verification" content="UphDCSqXKDBZF8Uyot7RJpQUxqsdrp2GDZXgiORHwgs" />
	<meta property="og:site_name" content="autoComplete.js">
	<meta property="og:title" content="autoComplete.js">
	<meta property="og:description" content="Simple autocomplete pure vanilla Javascript library.">
	<meta property="og:type" content="product">
	<meta property="og:url" content="https://tarekraafat.github.io/autoComplete.js/demo/">
	<meta property="og:image" content="https://tarekraafat.github.io/autoComplete.js/img/autoComplete.js_Preview.png">
	<meta property="og:image"
		content="https://tarekraafat.github.io/autoComplete.js/img/autoComplete.js_WidePreview.png">
	<meta property="og:image" content="https://tarekraafat.github.io/autoComplete.js/img/autoComplete.init.png">
	<meta property="og:image:type" content="image/png">
	<meta property="og:image:width" content="1200">
	<meta property="og:image:height" content="1200">
	<meta property="fb:app_id" content="1482373115226718">
	<meta name="viewport"
		content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="manifest" href="https://tarekraafat.github.io/autoComplete.js/manifest.json">
	<link rel="apple-touch-icon" sizes="57x57"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-57x57.png">
	<link rel="apple-touch-icon" sizes="60x60"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-60x60.png">
	<link rel="apple-touch-icon" sizes="72x72"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-72x72.png">
	<link rel="apple-touch-icon" sizes="76x76"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-76x76.png">
	<link rel="apple-touch-icon" sizes="114x114"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-114x114.png">
	<link rel="apple-touch-icon" sizes="120x120"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-120x120.png">
	<link rel="apple-touch-icon" sizes="144x144"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-144x144.png">
	<link rel="apple-touch-icon" sizes="152x152"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-152x152.png">
	<link rel="apple-touch-icon" sizes="180x180"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/apple-icon-180x180.png">
	<link rel="icon" type="image/png" sizes="192x192"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/android-icon-192x192.png">
	<link rel="icon" type="image/png" sizes="32x32"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="96x96"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/favicon-96x96.png">
	<link rel="icon" type="image/png" sizes="16x16"
		href="https://tarekraafat.github.io/autoComplete.js/img/icons/favicon-16x16.png">
	<link rel="manifest" href="https://tarekraafat.github.io/autoComplete.js//manifest.json">
	<meta name="msapplication-TileColor" content="#ffffff">
	<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
	<meta name="theme-color" content="#ffffff">
	<link rel="stylesheet" type="text/css" media="screen"
		href="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/css/autoComplete.min.css">
	<!-- <link rel="stylesheet" type="text/css" media="screen" href="./css/autoComplete.css"> -->
	<link rel="stylesheet" type="text/css" media="screen" href="./css/main.css">
	<link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet">
</head>

<body>
	<div class="container">
		<a href="https://github.com/TarekRaafat/autoComplete.js" class="github-corner"
			aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250"
				style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true">
				<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
				<path
					d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
					fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
				<path
					d="M111,111 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
					fill="currentColor" class="octo-body"></path>
			</svg></a>
		<style>
			.github-corner:hover .octo-arm {
				animation: octocat-wave 560ms ease-in-out;
			}

			@keyframes octocat-wave {

				0%,
				100% {
					transform: rotate(0);
				}

				20%,
				60% {
					transform: rotate(-25deg);
				}

				40%,
				80% {
					transform: rotate(10deg);
				}
			}

			@media (max-width: 500px) {
				.github-corner:hover .octo-arm {
					animation: none;
				}

				.github-corner .octo-arm {
					animation: octocat-wave 560ms ease-in-out;
				}
			}
		</style>
		<header class="header">
			<h1>
				<a href="https://tarekraafat.github.io/autoComplete.js/">autoComplete.js</a>
			</h1>
		</header>
		<div class="body" align="center">
			<input id="autoComplete" type="text" dir="ltr" spellcheck=false autocorrect="off" autocomplete="off"
				autocapitalize="off" maxlength="2048" tabindex="1">
			<div class="mode">
				<h4>mode</h4>
				<div class="toggle">
					<div class="toggler">Strict</div>
				</div>
			</div>
			<div class="selection"></div>
		</div>
		<footer class="footer">
			<div class="copyrights">
				Copyright &copy; <span id="year">
					<script>document.getElementById('year').innerHTML = new Date().getFullYear();</script>
				</span>
				<a href="http://www.tarekraafat.com/">Tarek Raafat</a> All Rights
				Reserved
			</div>
		</footer>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.6/dist/autoComplete.min.js"></script>
	<!-- <script src="./js/autoComplete.js"></script> -->
	<script src="./js/index.js"></script>
</body>

</html>